/*
* @Author: Yejing
* @Date: 2023-05-29 17:18:57
* @LastEditors: Yejing
* @LastEditTime: 2023-07-03 11:19:08
* @Description: 气泡
*/


<template>
    <view class="more-block">
        <u-icon name="more-dot-fill" :color="iconColor" size="55" @click="moreClick"></u-icon>
        <view class="bubble" v-show="show" :style="{'background':background,'color':color}">
            <view class="line">
                <text v-for="(item,index) in data" :key="index" @click="bubbleLineClick(item,index)">
                    <text>
                        <u-icon :name="item.icon"></u-icon>
                        {{ item.text }}
                    </text>
                </text>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    props: {
        //数据
        data: {
            type: Array,
            default: []
        },
        //背景颜色
        background: {
            type: String,
            default: '#323755'
        },
        //图标颜色
        iconColor: {
            type: String,
            default: '#fff'
        },
        //字体颜色
        color: {
            type: String,
            default: '#fff'
        }
    },
    data() {
        return {
            show: false
        }
    },
    methods: {
        //更多
        moreClick() {
            this.show = !this.show
        },
        bubbleLineClick(item, index) {
            this.$emit('bubbleLineClick', item, index)
        }
    }
}
</script>

<style lang="scss" scoped>
.more-block {
  position: relative;
  z-index: 999;

  .bubble {
    position: absolute;
    width: 202rpx;
    font-size: 28rpx;
    right: -14rpx;
    padding: 28rpx;
    border-radius: 30rpx;
    margin-top: 15rpx;

    .line {
      uni-text {
        display: block;
        margin-bottom: 38rpx;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .u-icon {
        margin-right: 20rpx;
      }
    }

    &::after {
      position: absolute;
      top: -16rpx;
      right: 54rpx;
      content: '';
      border: 8px solid transparent;
      border-top: none;
      border-bottom-color: #323755;

    }

  }
}
</style>
